<template>
    <div class="layout">
        <app-header></app-header>
        <Row class="layout-container">
            <!--<Col class="layout-nav-left" span="4">
            <nav-bar :memu-tree="memuData"></nav-bar>
            </Col>-->
            <Col class="layout-content" span="24">
            <div class="layout-breadcrumb">
                <Breadcrumb>
                    <Breadcrumb-item href="#">首页</Breadcrumb-item>
                    <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
                    <Breadcrumb-item>某应用</Breadcrumb-item>
                </Breadcrumb>
            </div>
            <div class="layout-main">
                <Row :gutter="16">
                    <Col span="12">
                    <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            图表
                        </p>
                        <a href="#" slot="extra" @click.prevent="changeLimit">
                            <Icon type="ios-loop-strong"></Icon>
                            刷新
                        </a>
                        <chart :options="polar"></chart>
                    </Card>
                    </Col>
                    <Col span="12">
                    <Card>
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            图表
                        </p>
                        <a href="#" slot="extra" @click.prevent="changeLimit">
                            <Icon type="ios-loop-strong"></Icon>
                            刷新
                        </a>
                        <chart :options="polar"></chart>
                    </Card>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    <!--<chart :options="polar"></chart>-->
                    </Col>
                    <Col span="12">
                    <!--<chart :options="polar"></chart>-->
                    </Col>
                </Row>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
// const Index = r => require.ensure([], () => r(require('../pages/Index.vue')), 'index');
// import chart from 'vue-echarts/components/ECharts.vue';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import AppHeader from '../components/AppHeader';
import NavBar from '../components/NavBar';


export default {
    components: {
        AppHeader,
        NavBar,
        // chart,
    },
    data() {
        return {
            memuData: [
                {
                    path: '/order',
                    text: '导航一一',
                    icon: 'ios-navigate',
                    subMemu: [
                        { path: '/order', text: '子导航一一' },
                        { path: '/order', text: '子导航一一' },
                    ],
                },
                {
                    path: '/index',
                    text: '导航二二',
                    icon: 'ios-navigate',
                    subMemu: [
                        { path: '/order', text: '子导航一一' },
                        { path: '/order', text: '子导航一一' },
                    ],
                },
            ],
            polar: {
                tooltip: {
                    trigger: 'axis',
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                legend: {
                    data: ['订单', '有效订单', 'PV'],
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'PV',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 万',
                        },
                    },
                    {
                        type: 'value',
                        name: '订单',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 万',
                        },
                    },
                ],
                series: [
                    {
                        name: '订单',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    },
                    {
                        name: '有效订单',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    },
                    {
                        name: 'PV',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                    },
                ],
            },

        };
    },
};
</script>

<style scoped lang="less">

</style>
